<script setup lang="ts">
import axios from "axios";
// ant消息组件
import ImageUpload from "~/components/ai/ImageUpload.vue";
import DropSelect from "~/components/common/DropSelect.vue";
import LabelBase from "~/components/ai/LabelBase.vue";
import Prompt from "~/components/ai/PromptBase.vue";
import ModelSelect from "~/components/ai/ModelSelect.vue";
import SliderBase from "~/components/ai/SliderBase.vue";
import Denoise from "~/components/ai/Denoise.vue";
import Negative from "~/components/ai/Negative.vue";
import Positive from "~/components/ai/Positive.vue";
import {ComfyUI} from "~/utils/comfyuiApi";

const snackbarStore = useSnackbarStore()
const authStore = useAuthStore()
const sdStore = useStableDiffusionStore()
const {isGernateDisable, totalSteps, excutingApi, img2imgParams} = storeToRefs(sdStore)
const alertInfo = ref(useGlobalConfig.Draw.exceedSizeRemind)

// const emptyWarn = () => {
//   snackbarStore.showWarningMessage(alertInfo.value)
//   isGernateDisable.value = false
// };
// const exceedsizeWarn = () => {
//   snackbarStore.showWarningMessage(useGlobalConfig.Draw.exceedSizeRemind)
//   isGernateDisable.value = false
// };

//传递参数
onMounted(async () => {
  // socketInit()

  //如果当前store中存储的大模型名称不存在则重置为第一个
  if (img2imgParams.value.ckpt_name && !ComfyUI.ckpt_names.includes(img2imgParams.value.ckpt_name)) {
    img2imgParams.value.ckpt_name = ComfyUI.ckpt_names[0]
  }

})

const sizeValidation = ref(false)
const emptyValidation = ref(false)
const uploadfile = ref()
//生成图片
const imageGenerate = async () => {
  if (!uploadfile.value || uploadfile.value?.length === 0) {
    useSnackbarStore().showWarningMessage("请上传图片")
    return
  }
  isGernateDisable.value = true
  //总生成步数计算进度百分比
  totalSteps.value = 36
  excutingApi.value = "图生图"
  //普通图生图
  await ComfyUI.Initalize()
  img2imgParams.value.image_path_origin = await ComfyUI.uploadImage(uploadfile.value[0].originFileObj)
  const output = await ComfyUI.img2img({...img2imgParams.value})
  if (output) {
    sdStore.addImage(output.output[0])
    //保存历史记录
    await ComfyUI.saveDrawHistory({
      output:output.output,
      params:img2imgParams.value,
      type:'image'
    })
  }
  isGernateDisable.value = false
}
</script>

<template>
  <v-card>
    <!--    <context-holder />-->

    <v-card-text>
      <!-- 图片上传组件 -->
      <image-upload v-model:uploadfile="uploadfile"/>

      <!-- 正向提示词  v-show="props.config?.showPositive || true"-->
      <positive v-model="img2imgParams.positive"/>
      <!-- Negative Prompt  -->
      <negative v-model="img2imgParams.negative"/>

      <!--      选择大模型-->
      <model-select v-model="img2imgParams.ckpt_name"/>
      <!-- 重绘幅度   -->
      <denoise v-model="img2imgParams.denoise"/>
      <!-- 生成按钮 -->
      <v-btn class="mt-2" size="x-large" color="primary" :loading="sdStore.isGernateDisable"
             :disabled="sdStore.isGernateDisable"
             block @click="imageGenerate">开始生成
        <template v-slot:loader>
          {{ sdStore.btnStatus }}
          <v-progress-circular
              color="primary"
              indeterminate
              :model-value="sdStore.getProcess"></v-progress-circular>
        </template>
      </v-btn>
    </v-card-text>
  </v-card>
</template>

<style scoped lang="scss">
//  .preview-cover {
//     position: absolute;
//     bottom: 0;
//     box-sizing: border-box;
//     width: 100%;
//     padding: 4px;
//     color: #fff;
//     font-size: 12px;
//     text-align: center;
//     background: rgba(0, 0, 0, 0.3);
//   }
</style>
